<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div
			{
			width:100px;
			height:50px;
			background:red;
			color:white;
			font-weight:bold;
			position:relative;
			animation:mymove 22s infinite;
			-webkit-animation:mymove 22s infinite; /* Safari and Chrome */
			}
			#div1 {animation-timing-function: cubic-bezier(0.5,3,1,7);}
			#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
			#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
			#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
			#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
			
			.div1 {animation-timing-function: linear;}
			.div2 {animation-timing-function: ease;}
			.div3 {animation-timing-function: ease-in;}
			.div4 {animation-timing-function: ease-out;}
			.div5 {animation-timing-function: ease-in-out;}
			
			@keyframes mymove
			{
			from {left:0px;}
			to {left:300px;}
			}
			/* cubic-bezier称为三次贝塞尔曲线，主要是生成速度曲线的函数
			规定是cubic-bezier(<x1>,<y1>,<x2>,<y2>)  
			X轴的范围是0~1，超出cubic-bezier将失效，
			Y轴的取值没有规定，但是也不宜过大。*/
			
	/* 3、transition-timing-function 规定过渡效果的速度曲线。
			
	transition-timing-function:
	linear | ease | ease-in |ease-out |ease-in-out |cubic-bezier(n,n,n,n) 
			
	linear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
			
	ease-in规定慢速开始，然后变快，
	然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
			
	ease-out规定以慢速开始和结束的过渡效果
	（等于 cubic-bezier(0.42,0,0.58,1)）
			
	cublic-bezier(n,n,n,n)在 cubic-bezier 
	函数中定义自己的值。可能的值是 0 至 1 之间的数值。 */
		</style>
	</head>
	<body>
		<div id="div1">linear</div>
		<div id="div2">ease</div>
		<div id="div3">ease-in</div>
		<div id="div4">ease-out</div>
		<div id="div5">ease-in-out</div>
		<br><br>
		<div class="div1">linear</div>
		<div class="div2">ease</div>
		<div class="div3">ease-in</div>
		<div class="div4">ease-out</div>
		<div class="div5">ease-in-out</div>
		
		
			
		</div>
	</body>
</html>
